<template>
  <view class="repair-container">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="header-title">故障报修</view>
      <view class="header-subtitle">快速解决校园设施问题</view>
    </view>
    
    <!-- 报修表单 -->
    <view class="form-container">
      <view class="form-item">
        <text class="form-label">报修类型</text>
        <picker @change="bindTypeChange" :value="typeIndex" :range="typeArray" range-key="name">
          <view class="picker">
            {{typeArray[typeIndex].name}}
            <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
          </view>
        </picker>
      </view>
      
      <view class="form-item">
        <text class="form-label">故障位置</text>
        <picker @change="bindLocationChange" :value="locationIndex" :range="locationArray" range-key="name">
          <view class="picker">
            {{locationArray[locationIndex].name}}
            <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
          </view>
        </picker>
      </view>
      <view class="form-item">
        <text class="form-label">详细位置</text>
        <picker
			mode="selector" 
			:range="colleges" 
			:value="collegeIndex" 
			@change="onCollegeChange">
			<view class="picker-view">
			  {{ colleges[collegeIndex] || '请选择学校' }}
			</view>
		</picker>
      </view>
      <view class="form-item">
        <text class="form-label">详细位置</text>
        <input class="input" v-model="detailLocation" placeholder="如：3楼305教室靠窗第二排" />
      </view>
      
      <view class="form-item">
        <text class="form-label">故障描述</text>
        <textarea class="textarea" v-model="problemDesc" placeholder="请详细描述故障现象..." auto-height />
      </view>
      
      <view class="form-item">
        <text class="form-label">上传图片</text>
        <view class="upload-container">
          <view class="upload-item" v-for="(item, index) in imageList" :key="index">
            <image class="upload-image" :src="item" mode="aspectFill"></image>
            <view class="delete-btn" @click="deleteImage(index)">
              <uni-icons type="closeempty" size="16" color="#fff"></uni-icons>
            </view>
          </view>
          <view class="upload-btn" @click="chooseImage" v-if="imageList.length < 3">
            <uni-icons type="plusempty" size="28" color="#999"></uni-icons>
            <text class="upload-text">上传图片</text>
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="form-label">联系人</text>
        <input class="input" v-model="contactName" placeholder="请输入您的姓名" />
      </view>
      
      <view class="form-item">
        <text class="form-label">联系电话</text>
        <input class="input" v-model="contactPhone" placeholder="请输入您的手机号" type="number" />
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-btn" @click="submitRepair">
      提交报修
    </view>
    
    <!-- 底部导航 -->
    <view class="footer">
      <text>遇到紧急情况请直接拨打维修中心电话：18300852137</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      typeIndex: 0,
	  colleges: [],
	  collegeIndex:'',
      typeArray: [
        {name: '请选择报修类型', id: ''},
        {name: '无法上网', id: 1},
        {name: '网速慢', id: 2},
        {name: '其他问题', id: 3},
      ],
      locationIndex: 0,
      locationArray: [
        {name: '请选择故障位置', id: ''},
        {name: '教学楼', id: 1},
        {name: '图书馆', id: 2},
        {name: '宿舍楼', id: 3},
        {name: '食堂', id: 4},
        {name: '体育场馆', id: 5},
        {name: '行政楼', id: 6}
      ],
      detailLocation: '',
      problemDesc: '',
      imageList: [],
      contactName: '',
      contactPhone: '',
	  college_id:'',
	  college:'',
	  list:[],
    }
  },
  onLoad() {
  	this.getShool()
  },
  methods: {
	async  getShool(){
		const res = await this.$api.get('/School/list')
		if(res.data.code === 200) {
			this.list = res.data.data
			res.data.data.forEach(item => {
				this.colleges.push(item.school_name)
			})
			this.colleges.unshift('请选择学校')
		}
	},
	onCollegeChange(e) {
	  this.collegeIndex = e.target.value;
	  this.college = this.colleges[this.collegeIndex];
	  this.college_id = this.list[this.collegeIndex].school_id
	  console.log('dasdada',this.college_id,this.collegeIndex)
	},
    bindTypeChange(e) {
      this.typeIndex = e.detail.value
    },
    bindLocationChange(e) {
      this.locationIndex = e.detail.value
    },
    chooseImage() {
      uni.chooseImage({
        count: 3 - this.imageList.length,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
		  const tempFilePaths = res.tempFilePaths;
		  this.$api.uploadFile('/upload/File',tempFilePaths[0]).then(res => {
		   this.imageList = this.imageList.concat(res.data.cosUrl)
		  })
        }
      })
    },
    deleteImage(index) {
      this.imageList.splice(index, 1)
    },
    async submitRepair() {
      if (this.typeIndex === 0) {
        uni.showToast({
          title: '请选择报修类型',
          icon: 'none'
        })
        return
      }
      
      if (this.locationIndex === 0) {
        uni.showToast({
          title: '请选择故障位置',
          icon: 'none'
        })
        return
      }
	  if (this.collegeIndex === 0) {
	    uni.showToast({
	      title: '请选择学校',
	      icon: 'none'
	    })
	    return
	  }
      
      if (!this.detailLocation) {
        uni.showToast({
          title: '请输入详细位置',
          icon: 'none'
        })
        return
      }
      
      if (!this.problemDesc) {
        uni.showToast({
          title: '请输入故障描述',
          icon: 'none'
        })
        return
      }
      
      if (!this.contactName) {
        uni.showToast({
          title: '请输入联系人',
          icon: 'none'
        })
        return
      }
      
      if (!this.contactPhone) {
        uni.showToast({
          title: '请输入联系电话',
          icon: 'none'
        })
        return
      }
	  const params = {
		dormitory:this.detailLocation,
		phone:this.contactPhone,
		images:JSON.stringify(this.imageList),
		college_id:this.college_id,
		college:this.college,
		description:this.problemDesc,
		fault_type:this.typeIndex
	  }
      const res = await this.$api.post('/BroadbandRepair/submit',params,true)
      // 这里应该是提交到服务器的代码
     
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '报修成功',
          icon: 'success'
        })
        
        // 重置表单
        this.typeIndex = 0
        this.locationIndex = 0
        this.detailLocation = ''
        this.problemDesc = ''
        this.imageList = []
        this.contactName = ''
        this.contactPhone = ''
		this.collegeIndex = 0
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.repair-container {
  padding: 20rpx 30rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
  box-sizing: border-box;
}

.header {
  margin-bottom: 40rpx;
  .header-title {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  .header-subtitle {
    font-size: 28rpx;
    color: #999;
  }
}

.form-container {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.form-item {
  margin-bottom: 40rpx;
  .form-label {
    display: block;
    font-size: 30rpx;
    color: #333;
    margin-bottom: 20rpx;
    font-weight: 500;
  }
  .picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    border: 1rpx solid #eee;
    border-radius: 8rpx;
    font-size: 28rpx;
    color: #333;
  }
  .input {
    padding: 20rpx;
    border: 1rpx solid #eee;
    border-radius: 8rpx;
    font-size: 28rpx;
  }
  .textarea {
    width: 100%;
    padding: 20rpx;
    border: 1rpx solid #eee;
    border-radius: 8rpx;
    font-size: 28rpx;
    min-height: 150rpx;
    box-sizing: border-box;
  }
}

.upload-container {
  display: flex;
  flex-wrap: wrap;
  .upload-item {
    width: 180rpx;
    height: 180rpx;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    position: relative;
    .upload-image {
      width: 100%;
      height: 100%;
      border-radius: 8rpx;
    }
    .delete-btn {
      position: absolute;
      top: -10rpx;
      right: -10rpx;
      width: 40rpx;
      height: 40rpx;
      background-color: #ff5a5f;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .upload-btn {
    width: 180rpx;
    height: 180rpx;
    border: 1rpx dashed #ddd;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .upload-text {
      font-size: 24rpx;
      color: #999;
      margin-top: 10rpx;
    }
  }
}

.submit-btn {
  background: linear-gradient(to right, #4a90e2, #5fb0e5);
  color: #fff;
  text-align: center;
  padding: 25rpx;
  border-radius: 50rpx;
  font-size: 32rpx;
  margin: 50rpx 0;
  box-shadow: 0 8rpx 16rpx rgba(74, 144, 226, 0.3);
}

.footer {
  text-align: center;
  font-size: 24rpx;
  color: #999;
  padding: 30rpx 0;
}
</style>